import React, { Component } from 'react';
import { connect } from "react-redux";
import {Link,NavLink} from 'react-router-dom';
import lrz from 'lrz';
import { Toast } from 'react-weui';
import Header from '../../../../components/Header/Header';
import '../../../../static/css/common.less';
import * as actions from '../../../../store/action/my';
import axios from '../../../../api/api';
import './personal.less';

class Personal extends Component {
    state = {
        fetching : false
    }

    componentWillMount(){
        this.props.fetchUser();
    }


    changeFile = (e) =>{
        var self = this;
        self.file = event.target.files[0];
        this.setState({
            fetching: true
        })
        axios.get(
            'api/oss-upload-token'
        ).then(function (response) {
            if (response.ret != 0) {
                alert(response.msg);
                return;
            }
            let client = new OSS({
                region: response.data.region,
            //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
                accessKeyId: response.data.AccessKeyId,
                accessKeySecret: response.data.AccessKeySecret,
                stsToken: response.data.SecurityToken,
                bucket: response.data.bucket
            });
            client.put((new Date()).getTime() + self.file.name, self.file).then(function (r1) {
                let data = self.props.my.user;
                let id = self.props.my.user.id;
                data.avatar = r1.url;
                self.props.changeUserName(id, data);
                self.setState({
                    fetching: false
                })
            }).then(function (r2) {
                //console.log('get success: %j', r2);
            }).catch(function (err) {
                //console.error('error: %j', err);
                self.setState({
                    fetching: false
                })
            });
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() {
        return (
            <div>
                <div className="detail-region">
                    <Toast icon="loading" show={this.state.fetching}>Loading...</Toast>
                    <Header title="个人信息"></Header>
                    <section class="content">
                       <div className="upload">
                            <label>
                                <img src={this.props.my.user.avatar}></img>
                                <input type="file" className="file-upload" onChange={this.changeFile}/> 
                            </label>
                            
                       </div>
                       <div className="head-bg">
                            <img src={require('../../../../static/images/headerBg.png')}></img>
                            <div className="header-title">点击头像进行修改</div>
                       </div>
                       <div className="item-content">
                            <Link to="/changeName">
                            <div className="item">
                                <div className="left-item">修改昵称</div>
                                <div className="right-item">{this.props.my.user.nickname}</div>
                                <img src={require('../../../../static/images/right.png')} class="right-ico"></img>
                            </div>
                            </Link>
                            <Link to="/addressList">
                            <div className="item">
                                <div className="left-item">收货地址</div>
                                <img src={require('../../../../static/images/right.png')} class="right-ico"></img>
                            </div>
                            </Link>
                            {/* <div className="item">
                                <div className="left-item">修改账号</div>
                                <div className="right-item">13750503333</div>
                                <img src="./src/static/images/right.png" class="right-ico"></img>
                            </div>
                            <div className="item">
                                <div className="left-item">修改密码</div>
                                <img src="./src/static/images/right.png" class="right-ico"></img>
                            </div> */}
                       </div>
                    </section>
                </div>
            </div>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
       
    }
}

export default connect((state)=>{return {...state}}, actions)(Personal);